<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城首页</title>
	<link rel="stylesheet" href="css/aui/classify.css">
        <style type="text/css">
            .a1{
                background-color: #ffffff;
                color: #f5f5f5;
                border-bottom: 5px solid;
            }
            .a2{
                font-size: 10px;
                color: #CCC;
                border-bottom: 1px solid;
                padding-bottom: 0.3rem;
            }
            .s1{
                height: 40px;
                color: #CCC;
                border-bottom: 1px solid;
                border-right: 1px solid;
                text-align: center;

            }
            .s2{
                height: 40px;
                color: #CCC;
                text-align: center;
                border-bottom: 1px solid;
            }
            .c1{
                color: #121;
                line-height: 40px;
                font-size: 12px;
            }
            .c2{
                color: #121;
                line-height: 20px;
                font-size: 12px;
            }
            .d{
                height: 40px;
                color: #121;
                font-size: 12px;
            }
            @media(min-width: 375px){
                .c1{
                    color:#121;
                    line-height:40px;
                    font-size:12px;
                }
                .c2{
                    color:#121;
                    line-height: 40px;
                    font-size:12px;
                }
                .d{
                    height: 40px;
                    color: #121;
                    font-size: 12px;
                }

            }
        </style>
	</head>
	<body style="font-family:'黑体'">

	<div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
            <i class="aui-iconfont aui-icon-search"></i>
            <form action="javascript:search();">
                <input type="search" placeholder="请输入搜索内容" id="search-input">
            </form>
        </div>
        <div class="aui-searchbar-cancel" tapmod>取消</div>
    </div>
    <!--用aui将页面分为左右两部分-->
    <div class="aui-list aui-media-list" style="margin-top: 45px;">
        <div class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media">
                    <!--里面放左边导航-->
                    <div class="aui-tab" id="tab" style="padding-left: 0.75rem;">
                        <div class="aui-tab-item aui-active">图书</div>
                        <div class="aui-tab-item">手机通讯</div>
                        <div class="aui-tab-item">电脑产品</div>
                        <div class="aui-tab-item">服饰箱包</div>
                    </div>
                </div>
                <div class="aui-list-item-inner" id="s1">
                    <!--里面放右边内容-->
                    <div class="aui-list aui-media-list a1">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-inner ">
                                   <div class="aui-list-item-title"style="color: #039be5;"> 进入图书频道</div>
                                <div class="aui-list-item-text" style="padding-left: 10px;">
                                    优惠促新 新品上架 精品推荐
                                </div>
                            </div>
                            <div class="aui-list-item-media" style="width: 20px;line-height: 45px;">
                                <a href="index.html" class="aui-pull-right" style="float: right" >
                                    <span class="aui-iconfont aui-icon-right"></span>
                                </a>
                            </div>
                            </div>
                        </div>
                    </div>
                    <!--详细内容-->
                    <div class="aui-list aui-media-list" style="background-color: #ffffff;">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title a2"> 文学
                                        <a href="index.html" class="aui-pull-right" style="float: right" >
                                        <span class="aui-iconfont aui-icon-right"></span>
                                        </a>
                                    </div>
                                    <div class="aui-list-item-text" >
                                        <div class="aui-row" style="width: 100%;">
                                            <div class="aui-col-xs-4 s1">
                                                <a href="classify1.html" class="c1"> 文学理论</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c2"> 文学评论与鉴赏</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <a class="c1">文学史</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c2"> 名家作品与赏析</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 作品集</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <div class="aui-content-padded">
                                                    <p>
                                                    <div class="aui-btn aui-btn-block d">
                                                    展开<i class="aui-iconfont aui-icon-down"></i>
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-list-item-inner" id="s2" style="display: none;">
                    <!--里面放右边内容-->
                    <div class="aui-list aui-media-list a1">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title"style="color: #039be5;"> 进入手机通讯频道</div>
                                    <div class="aui-list-item-text" style="padding-left: 10px;">
                                        优惠促新 新品上架 精品推荐
                                    </div>
                                </div>
                                <div class="aui-list-item-media" style="width: 20px;line-height: 45px;">
                                    <a href="index.html" class="aui-pull-right" style="float: right" >
                                        <span class="aui-iconfont aui-icon-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--详细内容-->
                    <div class="aui-list aui-media-list" style="background-color: #ffffff;">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title a2"> 华为
                                        <a href="index.html" class="aui-pull-right" style="float: right" >
                                            <span class="aui-iconfont aui-icon-right"></span>
                                        </a>
                                    </div>
                                    <div class="aui-list-item-text" >
                                        <div class="aui-row" style="width: 100%;">
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 电池</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 耳机</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <a class="c1">其他配件</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 车载配件</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 转接线</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <div class="aui-content-padded">
                                                    <p>
                                                    <div class="aui-btn aui-btn-block d">
                                                        展开<i class="aui-iconfont aui-icon-down"></i>
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="aui-list aui-media-list" style="background-color: #ffffff;">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title a2"> 小米
                                        <a href="index.html" class="aui-pull-right" style="float: right" >
                                            <span class="aui-iconfont aui-icon-right"></span>
                                        </a>
                                    </div>
                                    <div class="aui-list-item-text" >
                                        <div class="aui-row" style="width: 100%;">
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 电池</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 耳机</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <a class="c1">其他配件</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 车载配件</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 转接线</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <div class="aui-content-padded">
                                                    <p>
                                                    <div class="aui-btn aui-btn-block d">
                                                        展开<i class="aui-iconfont aui-icon-down"></i>
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-list-item-inner" id="s3" style="display:none;">
                    <!--里面放右边内容-->
                    <div class="aui-list aui-media-list a1">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title"style="color: #039be5;"> 进入电脑产品频道</div>
                                    <div class="aui-list-item-text" style="padding-left: 10px;">
                                        优惠促新 新品上架 精品推荐
                                    </div>
                                </div>
                                <div class="aui-list-item-media" style="width: 20px;line-height: 45px;">
                                    <a href="index.html" class="aui-pull-right" style="float: right" >
                                        <span class="aui-iconfont aui-icon-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--详细内容-->
                    <div class="aui-list aui-media-list" style="background-color: #ffffff;">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title a2"> 电脑组件
                                        <a href="index.html" class="aui-pull-right" style="float: right" >
                                            <span class="aui-iconfont aui-icon-right"></span>
                                        </a>
                                    </div>
                                    <div class="aui-list-item-text" >
                                        <div class="aui-row" style="width: 100%;">
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 内存</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 显卡</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <a class="c1">主板</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> cpu</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 电源</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <div class="aui-content-padded">
                                                    <p>
                                                    <div class="aui-btn aui-btn-block d">
                                                        展开<i class="aui-iconfont aui-icon-down"></i>
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="aui-list-item-inner" id="s4" style="display:none;">
                    <!--里面放右边内容-->
                    <div class="aui-list aui-media-list a1">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title"style="color: #039be5;"> 进入服饰箱包频道</div>
                                    <div class="aui-list-item-text" style="padding-left: 10px;">
                                        优惠促新 新品上架 精品推荐
                                    </div>
                                </div>
                                <div class="aui-list-item-media" style="width: 20px;line-height: 45px;">
                                    <a href="index.html" class="aui-pull-right" style="float: right" >
                                        <span class="aui-iconfont aui-icon-right"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--详细内容-->
                    <div class="aui-list aui-media-list" style="background-color: #ffffff;">
                        <div class="aui-list-item">
                            <div class="aui-media-list-item-inner">
                                <div class="aui-list-item-inner ">
                                    <div class="aui-list-item-title a2"> 女装
                                        <a href="index.html" class="aui-pull-right" style="float: right" >
                                            <span class="aui-iconfont aui-icon-right"></span>
                                        </a>
                                    </div>
                                    <div class="aui-list-item-text" >
                                        <div class="aui-row" style="width: 100%;">
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 短外套</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 休闲西装</a>
                                            </div>
                                            <div class="aui-col-xs-4 s2">
                                                <a class="c1">羽绒服</a>
                                            </div>
                                            <div class="aui-col-xs-4 s1">
                                                <a class="c1"> 牛仔服</a>
                                            </div>

                                            <div class="aui-col-xs-4 s2">
                                                <div class="aui-content-padded">
                                                    <p>
                                                    <div class="aui-btn aui-btn-block d" style="border-right: 1px solid #ccc;">
                                                        展开<i class="aui-iconfont aui-icon-down"></i>
                                                    </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="aui-bar aui-bar-tab" id="footer" >
        <div class="aui-bar-tab-item aui-active" tapmode>
            <a href="index.html" style="color:#121;text-decoration: none;">
                <i class="aui-iconfont aui-icon-home"></i>
                <div class="aui-bar-tab-label">
                    首页
                </div>
            </a>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <a href="classify.html" style="color:#039be5;text-decoration: none;">
                <i class="aui-iconfont aui-icon-star"></i>
                <div class="aui-bar-tab-label">
                    分类
                </div>
            </a>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <a href="carts.html" style="color:#121;text-decoration: none;">
                <i class="aui-iconfont aui-icon-cart"></i>
                <div class="aui-bar-tab-label">
                    购物车
                </div>
            </a>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <a href="person.html" style="color:#121;text-decoration: none;">
                <i class="aui-iconfont aui-icon-my"></i>
                <div class="aui-bar-tab-label">
                    我的
                </div>
            </a>
        </div>
    </footer>

    <script type="text/javascript" src="js/aui/aui-tab.js" ></script>
    <script type="text/javascript" src="js/aui/jquery-2.1.4.min.js" ></script>
    <script type="text/javascript">
        apiready=function () {
            api.parseTapmode();
        };
        var tab=new auiTab({
            element:document.getElementById("tab")
        },function (ret) {
            console.log(ret);
            if(ret){
                $('#s1').css('display','none');
                $('#s2').css('display','none');
                $('#s3').css('display','none');
                $('#s4').css('display','none');
                $('#s'+ret.index).css('display','block');
//                document.getElementById("demo").textContent=ret.index;
            }
        });
    </script>


	</body>
</html>